<template>
  <fieldset>
    <legend>神明也佑我</legend>
        {{$store.state.name}}

        <ul>
            <li>购物车车</li>
            <li>
                 <button @click="getProduct">提交</button>
            </li>
        </ul>
        <ol>
            <li v-for="(item,index) of list" :key="index">
                     {{item.title}}
            </li>
        </ol>
        <button @click="del">action</button>

        <h1>模块化怎么访问到属性</h1>
        <div>
            <!-- 卧槽好奇怪的用法 -->
            <!-- {{$store.state.user.username}} -->
            {{username}}
        </div>
        <button @click="say">调用user中的mutations</button>
  </fieldset> 
</template>

<script>
import { mapMutations ,mapState } from 'vuex';
export default {
  data() {
    return {
      
    };
  },
  computed:{
    ...mapState(["list"]),
    //命名空间引入方式
    ...mapState("user",["username"])
  },
  methods:{
    ...mapMutations(["getProduct"]),
    del(){
        this.$store.dispatch("getData")
    },
    //很特殊的写法啊
    ...mapMutations("user",["say"]),
    // nameSpace(){
    //     //带上模块化组件名字
    //     this.$store.commit("user/say")
    // }
  }
};
</script>

<style></style>
